<template>
  <div>
  <div class="lyric">
    <p v-show="!alllyric" v-html="lyricsC[1]"></p>
  </div>
  <transition name='fade'>
    <scroll :data="lyricsC">
    <div ref="alllyric" v-show="alllyric" @click="alllyricClick" class="alllyric">
      <div ref="lyric">
        <p
          @touchmove.prevent="lyricPClick"
          :class="{color: lyricsC[2] === item[2]}"
          v-for="(item, index) in list" :key="index"
          v-html="item[1]">
        </p>
      </div>
    </div>
    </scroll>
  </transition>
 </div>
</template>

<script>
import scroll from 'base/scroll'
export default {
  name: 'lyric',
  components: {
    scroll
  },
  props: {
    currentLyric: {
      type: Object,
      default: function() {
        return {}
      }
    },
    currentTime: {
      type: Number,
      default: 0
    },
    alllyric: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      list: [],
      lyricsC: [],
      time: 0
    }
  },
  watch: {
    currentLyric () {
      if (this.currentLyric) {
        this._restCurrentLyric(this.currentLyric)
      }
    },
    currentTime () {
      this._time(this.currentTime)
    },
    time () {
      if (this.$refs.lyric.childNodes.length === 0) {
        this.list = [0, '暂无歌词', 0]
        this.lyricsC = [0, '暂无歌词', 0]
        return
      }
      let alllyricHeight = this.$refs.alllyric.offsetHeight
      let height = this.$refs.lyric.firstChild.offsetHeight
      this.list.forEach((item) => {
        if (Math.floor(this.time * 1000) === item[0]) {
          this.lyricsC = item
          this.$refs.lyric.style.transform = 'translateY(' + (alllyricHeight / 2 - this.lyricsC[2] * height) + 'px)'
        }
      })
    }
  },
  methods: {
    lyricPClick() {
      console.dir(this.$refs.lyric)
    },
    // 把audio中的时间戳重新整理下格式，并判断和歌词中的时间是否匹配
    _time(currentTime) {
      let newTime = Math.floor(currentTime)
      if (newTime === this.time) {
        return
      }
      this.time = newTime
    },
    // 把当前的歌词对象处理为二维数组
    _restCurrentLyric(currentLyric) {
      let list = currentLyric.lines
      let a = new Array(list.length)
      for (let i = 0; i < list.length; i++) {
        let index = i
        a[i] = []
        a[i].push(list[i].time, list[i].txt, index)
      }
      this.list = a
    },
    alllyricClick () {
      this.$emit('alllyricClick')
    }
  }
}
</script>

<style scoped>
.lyric{
  position: absolute;
  z-index: 10;
  top: 70%;
  width: 80%;
  text-align: center;
  left: 10%;
}
.lyric p{
  color: white;
  font-size: .5rem;
}
.alllyric{
  position: absolute;
  z-index: 10;
  width: 100%;
  text-align: center;
  height: 70%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom,rgba(255,255,255,0) 0,rgba(255,255,255,.6) 15%,rgba(255,255,255,1) 25%,rgba(255,255,255,1) 75%,rgba(255,255,255,.6) 85%,rgba(255,255,255,0) 100%);
}
.alllyric p{
    color: white;
    font-size: .4rem;
    line-height: 1rem;
    width: 70%;
    margin: 0 auto;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 90%;
}
.alllyric div{
  transition: -webkit-transform 0.6s ease-out 0s;
  transform: translateY(215px);
}
.color{
  color: #31C27C!important;
  font-size: .5rem!important;
}
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s
}
.fade-enter, .fade-leave-to{
  opacity: 0;
}
</style>
